<template>
	<div class="add"><el-button type="primary" @click="add">添加</el-button></div>
	<el-dialog
		    v-model="dialogVisible_add"
		    title="Tips"
		    width="500"
		  >
		    <el-input type="text" v-model="name" placeholder="请输入添加的角色名"></el-input>
			<el-select
			      v-model="permissionValue"
			      placeholder="请选择权限"
			      size="large"
			      style="width: 240px" 
			    >
			      <el-option
			        v-for="item in options"
			        :key="item.id"
			        :label="item.name"
			        :value="item.id"
			      />
			    </el-select>
				<div>请选择菜单：</div>
				<!-- {{checkList}} -->
			<el-checkbox-group v-model="checkList">
			    <el-checkbox :label="item.name" :value="item.id" v-for="(item,i) in menu" :key="i" />
			  </el-checkbox-group>
		    <template #footer>
		      <div class="dialog-footer">
		        <el-button @click="dialogVisible_add = false">Cancel</el-button>
		        <el-button type="primary" @click="addSubmit">
		          Confirm
		        </el-button>
		      </div>
		    </template>
		  </el-dialog>
		<el-dialog
			    v-model="dialogVisible_update"
			    title="Tips"
			    width="500"
			  >
			    <el-input type="text" v-model="name" placeholder="请输入编辑的角色名"></el-input>
				<el-select
				      v-model="permissionValue"
				      placeholder="请选择权限"
				      size="large"
				      style="width: 240px" 
				    >
				      <el-option
				        v-for="item in options"
				        :key="item.id"
				        :label="item.name"
				        :value="item.id"
				      />
				    </el-select>
					<div>请选择菜单：</div>
					<!-- {{checkList}} -->
				<el-checkbox-group v-model="checkList">
				    <el-checkbox :label="item.name" :value="item.id" v-for="(item,i) in menu" :key="i" />
				  </el-checkbox-group>
			    <template #footer>
			      <div class="dialog-footer">
			        <el-button @click="dialogVisible_update = false">Cancel</el-button>
			        <el-button type="primary" @click="updateSubmit">
			          Confirm
			        </el-button>
			      </div>
			    </template>
			  </el-dialog>
		<el-dialog
		  v-model="dialogVisible_del"
		  title="Tips"
		  width="500"
		>
		  确认要删除 {{delName}} 吗？
		  <template #footer>
		    <div class="dialog-footer">
		      <el-button @click="dialogVisible_del = false">Cancel</el-button>
		      <el-button type="primary" @click="delSubmit">
		        Confirm
		      </el-button>
		    </div>
		  </template>
		</el-dialog>
	  <el-table :data="tableData" style="width: 1200px;">
	    <el-table-column prop="name" label="角色名" width="180" />
	    <el-table-column prop="createTime" label="创建时间" />
	    <el-table-column prop="updateTime" label="更新时间" />
		<el-table-column>
			<template #header>操作</template>
			<template #default="scope">
			  <el-button type="warning" @click="update(scope.row.id,scope.row.name)">编辑</el-button>
			  <el-button type="danger" @click="del(scope.row.id,scope.row.name)">删除</el-button>
			</template>
		</el-table-column>
	  </el-table>
</template>

<script setup>
	import {ref} from 'vue'
	const tableData = ref([])
	import {http} from "../components/http.js"
	function query(){
		http({url:"/queryRole",method:"get"}).then(res=>{
			tableData.value = res.data.data
		})
	}
	query()
	const dialogVisible_add = ref(false)
	const name = ref("")
	const permissionValue = ref(undefined)
	const options = ref([])
	const menu = ref([])
	function add(){
			dialogVisible_add.value = true
			permissionValue.value = undefined
			http({url:"/queryPermission",method:"get"}).then(res=>{
				options.value = res.data.data
			})
			http({url:"/queryMenu",method:"get"}).then(res=>{
				menu.value = res.data.data
			})
		}
	function addSubmit(){
		http({url:"/addRole",method:"post",data:{name:name.value,permission:permissionValue.value,menuIds:checkList.value}}).then(res=>{
			dialogVisible_add.value = false
			query()
		})
	}
	const checkList = ref([])
	const dialogVisible_del = ref(false)
	const delName = ref("")
	const delId = ref(undefined)
	function del(id,name){
			delId.value = id
			delName.value = name
			dialogVisible_del.value = true
		}
	function delSubmit(){
		http({url:"/delRole?id="+delId.value,method:"get"}).then(res=>{
				dialogVisible_del.value = false
				query()
		})
	}
	const dialogVisible_update = ref(false)
	const updateId = ref(undefined)
	function update(id,n){
		dialogVisible_update.value = true
		updateId.value = id
		name.value = n
		http({url:"/queryPermission",method:"get"}).then(res=>{
			options.value = res.data.data
		})
		http({url:"/queryMenu",method:"get"}).then(res=>{
			menu.value = res.data.data
		})
		http({url:"/findPermissionByRoleId?id="+id,method:"get"}).then(res=>{
			permissionValue.value = res.data.data[0].id
		})
		http({url:"/findMenuByRoleId?id="+id,method:"get"}).then(res=>{
			checkList.value = []
			res.data.data.forEach(item=>{
				checkList.value.push(item.id)
			})
		})
	}
	function updateSubmit(){
		http({url:"/updateRole",method:"post",data:{id:updateId.value,name:name.value,permission:permissionValue.value,checkList:checkList.value}}).then(res=>{
			dialogVisible_update.value = false
			query()
		})
	}
</script>

<style>
</style>